<template>
    <div class="content-trade">
        <div class="predict">
            <div>活动情况预测</div>
            <div>
                <span>目标评估</span>
                <p>有望达到预期</p>
            </div>
            <div class="picture-1" id="picture-1"></div>
        </div>
        <div class="passRate">
            <div>券核消率</div>
            <!--ECharts 仪表盘-->
<!--            <div class="ant-dash-board">-->
                <ant-dash-board></ant-dash-board>
<!--            </div>-->
            <!--<div class="passRate-1" id="passRate-1"></div>-->
        </div>
    </div>
</template>

<script>
    import antDashBoard from "./antDashBoard";

    export default {
        name: "tradeLeft",
        components: {
            /*注册组件注意事项:1.组件名称驼峰命名,组件首字母必须大写,AntDashBoard*/
            AntDashBoard: antDashBoard
        },
        data() {
            return {}
        },
        created() {
        },

        methods: {},

        mounted() {
            var myChart = this.$echarts.init(document.getElementById('picture-1'));

            // 指定图表的配置项和数据
            // eslint-disable-next-line no-unused-vars
            // xAxis. show = true
            var option = {
                tooltip: {
                    //鼠标悬停提示内容
                    trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item

                },

                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    show: false,
                    type: 'value',
                    min: 0,
                    max: 110,
                },
                series: [{
                    trigger: 'axis',

                    data: [10, 23, 31, 23, 27, 36, 44, 55, 65, 74, 83, 91],
                    type: 'line',
                    areaStyle: {},
                    // 显示数值
                    // itemStyle : { normal: {label : {show: true}}}
                }]

            };
            option && myChart.setOption(option);
        }

    }
</script>

<style scoped>
    p {
        margin: 0;
    }

    .content-trade {
        position: absolute;
        right: 25px;
        top: 25px;
        width: 400px;
        background: #f0f2f5;
        height: 650px;
    }

    .content-trade .predict {
        height: 312px;
        background: #ffffff;
        margin-bottom: 25px;
    }

    .content-trade .predict div:nth-child(1) {
        height: 40px;
        border-bottom: 1px solid #d3d3d3;
        text-align: left;
        padding: 25px 0 0 25px;
    }

    .content-trade .predict div:nth-child(2) {
        text-align: left;
        padding: 25px;
    }

    .content-trade .predict div:nth-child(2) span {
        font-size: 14px;
        color: #aaa8a8;
    }

    .content-trade .predict div:nth-child(2) p {
        font-size: 24px;
        margin: 10px 0;
    }

    .content-trade .predict .picture-1 {
        width: 400px;
        height: 70px;
    }

    .content-trade .passRate {
        height: 312px;
        background: #ffffff;
    }

    .content-trade .passRate div:nth-child(1) {
        height: 40px;
        border-bottom: 1px solid #d3d3d3;
        text-align: left;
        padding: 25px 0 0 25px;
    }

    .content-trade .passRate .passRate-1 {
        width: 100%;
        height: 79%;
    }

    .ant-dash-board {
        width: 200px;
        height: 200px;
    }


</style>
